<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户在线</title>
    <link rel="stylesheet" href="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/css/layui.css">
    <style>
        .layui-table-cell{
            height:36px;
            line-height: 36px;
        }
        .layui-col-xs1{
            height: 66px;
            line-height: 66px;
            margin: 5px 5px 0 0;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
        }
        .info{
            font-size: 14px;
            color: rgb(110, 108, 108);
            line-height: 36px;
        }
        .layui-icon-refresh-1{
            font-size: 30px;
            cursor: pointer;
            margin-left: 40px;
            position: fixed;
            top: 20px;
            right: 20px;
        }
        .layui-icon{
            cursor: pointer;
        }
        .usernuminfo{
            color:#f173e1;
            padding-left: 10px;
        }
    </style>
</head>
<body>
    <table id="demo" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            在线人数:<span class="usernuminfo">0</span>
        </div> 
        <i class="layui-icon layui-icon-refresh-1" lay-event="refresh" title="刷新"></i>
    </script>
    
    <script src="/static/lib/layui-v2.5.6/layui-v2.5.6/layui/layui.js"></script>
    <script>
        
        
        
        
        var userNum = 0
        layui.use(['table','laydate','form','util','layer'], function(){
            var $ = layui.jquery;
            var table = layui.table;
            var laydate =layui.laydate;
            var util = layui.util;
            var layer = layui.layer;

            table.render({
                elem: '#demo',
                height: 'full-60',
                method: 'get',
                                //TODO:
                url: '/admin/user/onlineUserNumber', //数据接口
                // page: true, //开启分页
                toolbar: '#toolbarDemo',
                defaultToolbar: [],
                id: 'crmTest',
                cols: [[ //表头
                // {type:'checkbox'},
                {type:'numbers'},
                {field: 'sessionId', title: 'sessionId', width:'20%',},
                {field: 'nickName', title: '用户名称'} ,
                {field: 'createTime', title: '登录时间', width:'15%'},
                {field: 'lastUseTime', title: '最后在线时间', width: '15%'},
                {field: 'lastUseTime', title: '用户状态', templet:'<div>{{statusfun(d.lastUseTime)}}</div>', width: '10%'},
                ]],


                parseData: function(res){ //res 即为原始返回的数据
                    return {
                    "code": res.success, //解析接口状态
                    "msg": res.message, //解析提示文本
                    // "count": res.data.total, //解析数据长度
                    "data": res.data //解析数据列表
                    };
                },
                request: {
                    pageName: 'page', //页码的参数名称，默认：page
                },
                response: {
                    statusCode: true //规定成功的状态码，默认：0
                },
                done: function (res, curr, count) {
                    $('.usernuminfo').html(userNum)
                }
            });
            laydate.render({
                elem: '#start_2',
                format: 'yyyy/MM/dd',
                trigger: 'click'
            });
            laydate.render({
                elem: '#end_2',
                format: 'yyyy/MM/dd',
                trigger: 'click'
            });
        
            table.on('toolbar(test)', function(obj){
                //搜索栏的实现
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'refresh':
                    location.reload()
                    break;
                };
            });

            
        });

        function dateTime(date) {
            if (date != '') {
                var dateTime = new Date(date).getTime()
            }else{
                var dateTime = ''
            }
            return dateTime
        }
        function ctime(num) {
            if (num == null) {
                var ctime = '订单未完成'
            }else {
                var ctime = layui.util.toDateString(Number(num), "yyyy.MM.dd HH:mm:ss")
            }
            return ctime
        }
        function statusfun(time){ 
            var date1= new Date(time);  //开始时间  
            var date2 = new Date();    //结束时间  
            // var nTime = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数 
            var nTime = (date2 - date1)/1000;   //时间差的毫秒数 
            var days = Math.floor(nTime/86400);
            var hours = Math.floor(nTime%86400/3600);
            var minutes = Math.floor(nTime%86400%3600/60);
            var seconds = Math.floor(nTime%86400%3600%60/60);
            time = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
            if (days== 0 && hours == 0 && minutes < 15) {
                var status = '<span style="color:#f173e1;">在线</span>'
                userNum++
            }else{
                var status = '离线'
            }
            return userNum,status;
        }
    </script>
</body>
</html>